<template>
	<div>
		<table cellpadding='0' cellspacing='0'>
			<el-button type="primary" @click='add1'>添加</el-button>
			<tr>
				<td>一级类型ID</td>
				<td>顺序</td>
				<td>一级类型名称</td>
				<td>修改</td>
				<td>二级节点信息</td>
			</tr>
			<tr v-for="(item , i) in typelist" :key="item.id">
				<td>{{item.id}}</td>
				<td>{{item.prio}}</td>
				<td>{{item.name}}</td>
				<td>
					<el-button type="text" @click="goupdate(item.id)">修改</el-button>
					<el-dialog title="类型信息" :visible.sync="dialogFormVisible">
						<el-form :model="from">
							<el-form-item label="一级ID" :label-width="formLabelWidth">
								<el-input v-model="from.id" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="一级类型名称" :label-width="formLabelWidth">
								<el-input v-model="from.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="顺序" :label-width="formLabelWidth">
								<el-input v-model="from.prio" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="update">修改</el-button>
						</div>
					</el-dialog>
				</td>
				<td>
					<div v-for="index in item.children" :key="index.id">
						<span>{{index.name}}</span>
					</div>
				</td>
			</tr>
		</table>
	</div>
</template>
<script>
	export default {
		name: 'FirstType',
		data() {
			return {
				dialogTableVisible: false,
				dialogFormVisible: false,
				a:false,
				formLabelWidth: '120px',
				typelist: [],
				book:[],
				from: {
					id: '',
					name: '',
					prio: '',
				}
			}
		},
		methods: {
			add1(){
				this.$router.push("/adm/add1");
			},
			goupdate(id) {
				this.dialogFormVisible = true;
				this.$get("/api/adm/type/findById/" + id).then((resp) => {
					this.from = resp.data.data
				})
			},
			update() {
				this.book=[]
				this.dialogFormVisible = false;
				this.$postKv("/api/adm/type/add", this.from).then((resp) => {
					this.book=resp.data.data
					console.log(this.book);
				})
			},
			getAllType() {
				this.$get("/api/adm/type/findAll2").then((res) => {
					if (res.status == 200) {
						console.log(res.data.data);
						 let typelist = res.data.data;
						console.log(typelist);
						var news = [];
						//先给假设所有的类型都是第一层，都添加一个children的数组
						typelist.forEach((type) => {
							//type.children = [];//给每个类型都添加一个children的数组
							news[type.id] = {
								...type,
								children: []
							};
						});
						console.log(news);
						console.log(news[0]);

						const newtypes = [];
						typelist.forEach((type) => {
							if (type.pid == 0) {
								//newtypes.push(type);
								newtypes.push(news[type.id]);
							} else {
								//var parent = type;//这样拿不到这个pid的父类型
								var parent = news[type.pid]; //先拿父类型
								console.log('pid : ');
								console.log(parent);
								if (parent) {
									parent.children.push(news[type.id]); //拿到子类型
									//parent.children.push(type);
								}
								console.log('添加完后 : ');
								console.log(parent);
							}
						});
						console.log(newtypes);
						this.typelist = newtypes;
						this.typelist.sort((a, b) => a.prio - b.prio);
						this.typelist.forEach((item) => {
							item.children.sort((a, b) => a.prio - b.prio);
						})
						console.log(this.typelist);
					}
				})
			}
		},
		mounted() {
			console.log(this.$route)
			this.from = this.$route.query;
			console.log(this.from)
			this.getAllType();
		}
	}
</script>

<style>
	td {
		width: 22%;
		border: 1px solid gainsboro;
	}

	.find-type1 {
		width: 90%;
		margin: auto;
	}

	.find-type1 .head {
		height: 50px;
		line-height: 50px;
	}

	.find-type1 .head button {
		margin-left: 300px;

	}
</style>
